// --------------------------------------------------
// 导航
// @Author: steven.wjx
// @Date:   2020-03-05 13:17:50
// --------------------------------------------------

.#{$ui-name}nav {
    margin-top: 0;
    margin-bottom: 0;
    padding-left: 0; // Override default ul/ol
    list-style: none;

    .#{$ui-name}nav-item {
        position: relative;
        display: block;
        transition: background-color 0.8s ease;

        .#{$ui-name}nav-link {
            position: relative;
            display: block;
            padding: 10px 15px;
            text-decoration: none;
            font-size: ceil($font-size/1.5);
            color: $primary-color;
            border-radius: $border-radius/2;
            transition: all .6s ease;

            @include hover-focus {
                background-color: lighten($primary-color, 40%);
                color: darken($primary-color, 20%);
                text-decoration: none;
            }
        }

        // Disabled state sets text to gray and nukes hover/tab effects
        &.disabled>a {
            color: #777;

            @include hover-focus {
                color: #777;
                text-decoration: none;
                background-color: transparent;
                cursor: not-allowed;
            }
        }

        &.active {
            .#{$ui-name}nav-link {
                font-weight: 600;
                background-color: $primary-color;
                color: #fff;
            }
        }

        @include hover-focus {
            outline: 0;
        }
    }

    // Nav dividers (deprecated with v3.0.1)
    //
    // This should have been removed in v3 with the dropping of `.#{$ui-name}nav-list`, but
    // we missed it. We don't currently support this anywhere, but in the interest
    // of maintaining backward compatibility in case you use it, it's deprecated.
    .#{$ui-name}nav-divider {
        height: 1px;
        margin: 5px 0;
        overflow: hidden;
        background-color: $disabled-bg;
    }

    &.#{$ui-name}nav-inline {
        >.#{$ui-name}nav-item {
            float: left;
        }

        .#{$ui-name}nav-divider {
            float: left;
            width: 1px;
            margin: 0 5px;
            height: 100%;
            min-height: 38px;
        }

        @include clearfix;
    }

    // Prevent IE8 from misplacing imgs
    //
    // See https://github.com/h5bp/html5-boilerplate/issues/984#issuecomment-3985989
    >li>a>img {
        max-width: none;
    }
}

// Give the tabs something to sit on
.#{$ui-name}nav-tab {
    border-bottom: 1px solid $border-color;
    @include clearfix;

    .#{$ui-name}nav-item {
        float: left; // Make the list-items overlay the bottom border
        margin-bottom: -1px; // Actual tabs (as links)

        .#{$ui-name}nav-link {
            color: $font-color;
            border-bottom: 2px solid transparent;

            @include hover-focus {
                cursor: default;
                background-color: transparent;
            }
        }

        &.active {
            .#{$ui-name}nav-link {
                background-color: #fff;
                color: $primary-color;
                font-weight: 600;
                border-bottom-color: $primary-color;
                border-radius: 0;
            }
        }
    }
}

// 标签内容
.#{$ui-name}tab-content {
    padding: 10px 15px;

    >.#{$ui-name}tab-pane {
        display: none;
    }

    >.active {
        display: block;
    }
}

.#{$ui-name}tab {

    &.#{$ui-name}tab-card,
    &.#{$ui-name}tab-border {
        .#{$ui-name}nav-tab {
            border: 1px solid $border-color;
            border-radius: $border-radius/2 $border-radius/2 0 0;

            .#{$ui-name}nav-item {
                .#{$ui-name}nav-link {
                    border-left: 1px solid $border-color;
                    border-radius: 0;

                    @include hover-focus {
                        color: $primary-color;
                    }
                }

                &:first-child {
                    .#{$ui-name}nav-link {
                        border-left-color: transparent;
                        border-radius: $border-radius/2 0 0 0;
                    }
                }

                &:last-child {
                    .#{$ui-name}nav-link {
                        border-radius: 0 $border-radius/2 0 0;
                    }
                }

                &.active {
                    .#{$ui-name}nav-link {
                        border-bottom-color: transparent;

                    }
                }
            }


        }
    }

    &.#{$ui-name}tab-card {
        .#{$ui-name}nav-tab {
            border: 0;

            .#{$ui-name}nav-item {
                .#{$ui-name}nav-link {
                    border: 1px solid $border-color;
                    border-left-color: transparent;
                }

                &:first-child {
                    .#{$ui-name}nav-link {
                        border-left-color: $border-color;
                    }
                }

            }
        }
    }

    &.#{$ui-name}tab-border {
        .#{$ui-name}nav-tab {
            background-color: $head-color;

            .#{$ui-name}nav-item {
                .#{$ui-name}nav-link {
                    margin-top: -1px;
                    border: 1px solid transparent;
                    border-top-color: $border-color;
                }

                &.active {
                    .#{$ui-name}nav-link {
                        border-bottom-color: transparent;
                        border-left: 1px solid $border-color;
                        border-right: 1px solid $border-color;
                    }

                    &:first-child {
                        .#{$ui-name}nav-link {
                            border-left-color: transparent;
                        }
                    }
                }

                &:last-child {
                    .#{$ui-name}nav-link {
                        border-radius: 0;
                    }
                }
            }
        }

        .#{$ui-name}tab-content {
            border: 1px solid $border-color;
            border-top-width: 0;
            border-radius: 0 0 $border-radius/2 $border-radius/2;
        }
    }
}